<div class="fullscreen table">
    <md-sidenav-container style="height:100%">
        <header class="app-header noshrink">
            <span id="table-back-btn" class="i-arrow-back margin-l header-icon" (click)="goBack()"></span>
            <span class="margin-l-xs" fxFlex="100%">台桌</span>
            <span class="header-icon noshrink margin-r text-m pct20 text-right" (click)="end.open()">{{selectedTableStatus.name}}</span>
        </header>
        <div class="table-nav-container noshrink">
            <nav class="table-nav" fxLayout="row" fxLayoutAlign="start center" *ngIf="tableZoneList&&tableZoneList.length">
                <div class="table-nav-item noshrink" fxLayout="column" fxLayoutWrap="nowrap" fxLayoutAlign="center center" *ngFor="let tableZone of tableZoneList"
                    [ngClass]="{'active': tableZone.active}" (click)="onSelectTableZone(tableZone)">
                    <div class="table-nav-name" fxLayout="column" fxLayoutAlign="center center" fxFlex="100%">{{tableZone.name}}</div>
                    <div class="table-nav-bottom"></div>
                </div>
            </nav>
        </div>
        <div fxLayout="column" fxFlex="100%" class="table-container v-scroll">
            <div fxLayout="row" fxLayoutWrap="wrap" *ngIf="tableList && tableList.length && !loading">
                <div *ngFor="let table of tableList;let index=index;trackBy:trackByTable" fxFlex="33.3%" fxFlex.gt-xs="25%" fxLayoutAlign="center center" [ngClass]="{'hideself': !isShowTable(table) || !checkTableStatus(table.status, table)}">
                    <div fxLayout="column" class="table-item text-xs" [ngClass]="{'table-open': table.tableParty && table.tableParty.status=='opening','table-preset': table.tableParty && table.tableParty.status=='presettled', 'table-cleaning': table.status == 'cleaning'}"
                        (click)="onTableClick(table)">
                        <div class="table-status-box" fxLayout="column">
                            <div fxLayout="row" fxLayoutAlign="center center" class="table-status-mark text-xs bgcolor-accent" *ngIf='(table.tableParty && table.tableParty.status != "closed" && table.tableParty.tableGroupId)'>并</div>
                            <div class="ico-besom color-white" *ngIf="table.status=='cleaning'"></div>
                        </div>
                        <div class="table-item-info" fxLayout="column" fxFlex="100%">
                            <span fxFlex="100%" class="table-name">{{table.name}}</span>
                            <span class="table-status" *ngIf="(!table.tableParty || !table.tableParty.status || table.tableParty.status == 'closed') && table.status!='cleaning'">空闲</span>
                            <span *ngIf="table.tableParty && table.tableParty.status != 'closed'">{{table.tableParty.openedTime | date:'HH:mm'}}</span>
                        </div>
                        <div fxLayout="row" fxLayoutAlign="start center" class="table-item-data noshrink">
                            <div fxLayout="row" fxLayoutAlign="start center" *ngIf="table.status != 'cleaning' && (!table.tableParty || table.tableParty.status != 'presettled')">
                                <span class="text-xs table-item-icon i-person"></span>
                                <span class="margin-r-xs" fxFlex="100%" *ngIf="table.tableParty && table.tableParty.status != 'closed'">{{(table.tableParty.extended &&table.tableParty.extended.headCount) ? table.tableParty.extended.headCount : ''}}</span>
                                <span class="margin-r-xs" *ngIf="!table.tableParty || !table.tableParty.status || table.tableParty.status == 'closed'">{{table.capacity ? table.capacity : 0}}</span>
                                <span *ngIf="table.tableParty && table.tableParty.status != 'closed'" class="table-creator noshrink">{{table | waiterNames | stringLimit:4}}</span>
                            </div>
                            <div fxLayout="row" fxLayoutAlign="start center" *ngIf="table.status=='cleaning' || (table.tableParty && table.tableParty.status == 'presettled')">
                                <div class="padding-l-xs" *ngIf="table.tableParty && table.tableParty.status == 'presettled'">
                                    <span>预结算</span>
                                </div>
                                <div class="padding-l-xs" *ngIf="table.status=='cleaning'">
                                    <span>待清台</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div fxFlex="50%" fxLayout="column" *ngIf="!loading">
                <div fxLayout="column" fxLayoutAlign="center center" fxFlexAlign="center" fxFlex="70%" *ngIf="!zoneHasTables">
                    <span>
                        没有台桌数据
                    </span>
                    <span class="text-s v-gap color-lightgray">
                        请打开店铺管理，依次点击设置-台桌设置，按照店铺需要添加台桌分区和台桌
                    </span>
                </div>
                <div class="v-gap" *ngIf="statusTables" fxFlexAlign="center">
                    <span>
                        没有{{selectedTableStatus.name}}的台桌数据
                    </span>
                </div>
            </div>
            <div *ngIf="loading" class="loading-data layout layout-align-center-center">
                <span class="rotate-infinite i-camera load-mask-icon color-primary"></span>
            </div>
        </div>
        <md-sidenav class="table-status-list" #end align="end">
            <md-nav-list>
                <div class="table-status-item margin-l-xs" fxLayout="row" fxLayoutAlign="start center" *ngFor="let status of tableStatus"
                    md-list-item (click)="onSwitchTableStatus(status, end)">
                    <div class="status-icon padding-l-xs">
                        <span *ngIf="status.status == this.selectedTableStatus.status" class="color-primary i-check-circle"></span>
                    </div>
                    <div class="status-name margin-l-xs">{{status.name}}</div>
                </div>
            </md-nav-list>
        </md-sidenav>
    </md-sidenav-container>

    <!-- 开台 -->
    <open-table></open-table>

</div>